<template>
    <video ref="videoPlayer" className="video-js" style="margin: auto auto">
        <source :src="videoUrl" type="application/x-mpegURL">
    </video>
</template>

<script setup>
    import {onMounted, onUnmounted, ref, nextTick} from "vue"
    import videojs from "video.js"
    import "video.js/dist/video-js.css"

    const videoUrl = ref();

    const videoPlayer = ref(null)

    const myPlayer = ref(null)

    onMounted(() => {
       nextTick(() => {
            myPlayer.value = videojs(videoPlayer.value, {
                controls: true,
                //静音自动播放
                autoplay: 'muted',
                // 设置视频播放器的显示宽度（以像素为单位）
                width: '887px',
                // 设置视频播放器的显示高度（以像素为单位）
                height: '665px',
                controlBar: {
                    remainingTimeDisplay: {
                        displayNegative: false
                    }
                },
                playbackRates: [0.5, 1, 1.5, 2]
            }, () => {

            })
        });
        videoUrl.value = "https://gcalic.v.myalicdn.com/gc/wgw05_1/index.m3u8"
    })

    onUnmounted(() => {
        if (myPlayer.value) {
            myPlayer.value.dispose()
        }
    })


</script>


<style scoped>

</style>
